<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <h2 class="brand-info__text">日常任务看板工具</h2>
          <p class="brand-info__intro">
            日常任务看板工具基于vue、element-ui构建开发，实现Go后台管理前端功能。
          </p>
        </div>
        <div class="login-main">
          <h3 class="login-title">登录</h3>
          <el-form
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            @keyup.enter.native="dataFormSubmit()"
            status-icon
          >
            <el-form-item prop="userName">
              <el-input
                v-model="dataForm.userName"
                placeholder="帐号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="dataForm.password"
                type="password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="refreshCapcha()" alt="" />
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-btn-submit"
                type="primary"
                @click="dataFormSubmit()"
                >登录</el-button>
              <br>
              <el-button
                class="login-btn-submit"
                type="primary"
                @click="tabToRegister()"
                >注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        userName: "",
        password: "",
        uuid: "",
        captcha: ""
      },
      dataRule: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ]
      },
      captchaId: "",
      captchaPath: "",
      captchaRefreshPath: ""
    };
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrlSys(
              `/captcha/${this.captchaId}/${this.dataForm.captcha}`
            )
          }).then(({ data }) => {
            if (data && data.code === 200) {
              this.$http({
                url: this.$http.adornUrlSys("/admin/users/login"),
                method: "post",
                data: this.$http.adornData({
                  user_name: this.dataForm.userName,
                  pass: this.dataForm.password
                })
              }).then(({ data }) => {
                if (data && data.code === 200) {
                  // 将token存入VueX中并持久化到LocalStorage
                  this.$store.commit("mSetTokenInfo", data.data.token);
                  this.$store.commit("mSetUserId", data.data.userId);
                  this.$router.push("/Hello");
                } else {
                  this.refreshCapcha();
                  this.$message.error(data.msg);
                }
              });
            }
          });
        }
      });
    },
    // 获取验证码请求数据
    getCaptcha() {
      this.$http({
        url: this.$http.adornUrlSys("/captcha/"),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.captchaId = data.data.id;
          this.captchaPath = "sys/" + data.data.img_url;
          this.captchaRefreshPath = data.data.refresh;
        }
      });
    },
    // 刷新验证码
    refreshCapcha() {
      this.captchaPath = this.captchaRefreshPath;
    },
    // 切换到注册页
    tabToRegister() {
      this.$router.push('/register');
    }
  }
};
</script>

<style>
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, 0.6);
  overflow: hidden;
}
.site-wrapper.site-page--login:before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url(~@/assets/img/login_bg.jpg);
  background-size: cover;
}
.site-wrapper.site-page--login .site-content__wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: transparent;
}
.site-wrapper.site-page--login .site-content {
  min-height: 100%;
  padding: 30px 500px 30px 30px;
}
.site-wrapper.site-page--login .brand-info {
  margin: 220px 100px 0 90px;
  color: #fff;
}
.site-wrapper.site-page--login .brand-info__text {
  margin: 0 0 22px 0;
  font-size: 48px;
  font-weight: 400;
  text-transform: uppercase;
}
.site-wrapper.site-page--login .brand-info__intro {
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.58;
  opacity: 0.6;
}
.site-wrapper.site-page--login .login-main {
  position: absolute;
  top: 0;
  right: 0;
  padding: 150px 60px 180px;
  width: 470px;
  min-height: 100%;
  background-color: #fff;
}
.site-wrapper.site-page--login .login-title {
  font-size: 16px;
}
.site-wrapper.site-page--login .login-captcha {
  overflow: hidden;
}
.site-wrapper.site-page--login .login-captcha > img {
  width: 100%;
  cursor: pointer;
}
.site-wrapper.site-page--login .login-btn-submit {
  width: 100%;
  margin-top: 38px;
}
</style>
